<template>
	<view>
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="#ffffff" leftWidth="90rpx" rightWidth="90rpx"
			color="#333" :fixed="true" :padding="false" :border="false" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">选择优惠券</text>
		</uni-nav-bar>
		<template v-if="couponList[0] ||couponListNot[0]">
			<scroll-view class="scroll-Y" :scroll-y="true" :refresher-enabled="true" refresher-default-style="none"
				refresher-background="rgba(255, 255, 255, 0)" @scroll="scroll"  @scrolltolower="reachBottom" :refresher-triggered="refreshing" @refresherrefresh="refresh">
			<view class="body-tab" v-if="couponList[0]||couponListNot[0]">
				<view class="use-coupon">
					可用优惠券
				</view>
				<view class="notuser-coupont flex-r ac">
					<image src="@/public/images/user/bsyyhq.png" mode="aspectFit"></image>
					<text>不使用优惠券</text>
					<view class="notuser-radio">
						<text class="checked" :class="{'checkedActive':check}" @tap="radioClick"></text>
					</view>
				</view>
				<view class="uni-list" v-if="couponList[0]">
						<view class="uni-list-cell uni-list-cell-pd coupon flex-r" v-for="(coupon, index) in couponList"
							:key="index">
							<view class="coupon-name flex-c" :class="'type'+coupon.couponType ">
								<view class="title flex-r">
									<text class="value" v-if="coupon.couponType < 3">{{coupon.jzAmount}}</text>
									<text class="value small" v-if="coupon.couponType == 3">免单</text>
									<text class="value"
										v-if="coupon.couponType == 4">{{(coupon.xxAmount % 10 == 0) ? coupon.xxAmount/10 : coupon.xxAmount}}</text>
									<text class="value small" v-if="coupon.couponType == 4">折</text>
								</view>
								<text class="des" v-if="coupon.couponType < 3">彩虹豆</text>
							</view>
							<view class="coupon-detail flex-c">
								<text class="title">{{coupon.couponTypeTxt}}</text>
								<text class="des" v-if="coupon.couponType >= 3">不大于{{coupon.jzAmount}}彩虹豆可用</text>
								<text class="des" v-if="coupon.couponType == 2">全场通用</text>
								<text class="des" v-if="coupon.couponType == 1">满{{coupon.xxAmount}}彩虹豆可用</text>
								<text class="date">有效期至{{coupon.validEndTime.replace(/-/gi, '.')}}</text>
							</view>
							<view class="coupon-tag" :class="'active'+coupon.status"
								v-if="coupon.sourceFrom == 'welfare' && coupon.expertName">
								<text>{{coupon.expertName}}专用</text>
							</view>
							<view class="coupon-radio">
									<text class="checked" :class="{'checkedActive':checked==index&&!check}" @tap="getChecked(index,coupon.jzAmount,coupon.id)"></text>
							</view>
						</view>
				</view>
				<view class="notuse-coupon" v-if="couponListNot[0]">
					不可用优惠券
				</view>
				<view class="uni-list" v-if="couponListNot[0]">
					<view class="coupon-bg" v-for="(coupon, index) in couponListNot"
						:key="index">
						<view class="coupon flex-r active">
							<view class="coupon-name flex-c" :class="'type'+coupon.couponType + ' tab' + coupon.couponType">
								<view class="title flex-r">
									<text class="value" v-if="coupon.couponType < 3">{{coupon.jzAmount}}</text>
									<text class="value small" v-if="coupon.couponType == 3">免单</text>
									<text class="value"
										v-if="coupon.couponType == 4">{{(coupon.xxAmount % 10 == 0) ? coupon.xxAmount/10 : coupon.xxAmount}}</text>
									<text class="value small" v-if="coupon.couponType == 4">折</text>
								</view>
								<text class="des" v-if="coupon.couponType < 3">彩虹豆</text>
							</view>
							<view class="coupon-detail flex-c">
								<text class="title">{{coupon.couponTypeTxt}}</text>
								<text class="des" v-if="coupon.couponType >= 3">不大于{{coupon.jzAmount}}彩虹豆可用</text>
								<text class="des" v-if="coupon.couponType == 2">全场通用</text>
								<text class="des" v-if="coupon.couponType == 1">满{{coupon.xxAmount}}彩虹豆可用</text>
								<text class="date">有效期至{{coupon.validEndTime.replace(/-/gi, '.')}}</text>
							</view>
							<view class="coupon-tag" :class="'active'+coupon.status"
								v-if="coupon.sourceFrom == 'welfare' && coupon.expertName">
								<text>{{coupon.expertName}}专用</text>
							</view>
							<view class="coupon-radio">
								<radio disabled="false" />
							</view>
						</view>
						<view v-if="coupon.couponType==1||coupon.couponType==3" class="notuser-cause">
							不可用原因：距离使用门槛还差{{coupon.xxAmount - price}}彩虹豆
						</view>
						<view v-else-if="Date.now()> Date.parse(coupon.validEndTime)" class="notuser-cause">
							不可用原因：优惠券已失效
						</view>
					</view>
				</view>
				<view class="list-end flex-r pb20" v-if="isEnd">
					<text>已经到底啦～</text>
				</view>
			</view>
			<view class="btn" @click="getDetermine">
				<text>确定</text>
			</view>
			</scroll-view>
		</template>
		<EmptyContent v-else top="160rpx" text="暂无优惠券" img="qsy_zwyhq"></EmptyContent>
	</view>
</template>

<script>
	export default {
		name: "UserCoupon",
		data() {
			return {
				CouponArr:[],//优惠券列表
				couponList: [],//可用优惠券列表
				couponListNot: [],//不可用优惠券列表
				pageNo: 1,
				expertId: null, //专家ID
				aid:null,//料id
				price: null, //料价格
				isEnd: false,
				check: false,//不使用优惠券
				checked:null,//可用优惠券
				refreshing: false, //下拉刷新状态
			}
		},
		computed: {
			user() {
				return this.$store.state.user
			}
		},
		onLoad() {
			this.expertId = this.$Route.query.eid
			this.price = this.$Route.query.price
			this.aid=this.$Route.query.aid
			if (this.expertId) {
				this.getCoupon()
			}
		},
		onReachBottom(){
			if(!this.isEnd){
				this.getCoupon()
			}
		},
		updated() {
			console.log(this.couponListNot, this.couponList, 'notCouponList')
		},
		methods: {
			scroll(e) {
				console.log('====')
			},
			//滑动触底加载
			reachBottom() {
				if (!this.isEnd) {
					this.getCoupon()
				}
			},
			//下拉刷新
			refresh() {
				//更新刷新状态，加载数据
				this.refreshing = true
				this.getCoupon
				setTimeout(() => {
					this.refreshing = false
				}, 800)
			},
			//查询优惠劵
			getCoupon() {
				this.$http.get({
					url: "/api/appUser/queryUserCouponByUserId",
					data: {
						pageNo: this.pageNo,
						pageSize: 10,
						userId: this.user.userId,
						expertId: this.expertId,
						status: 1
					}
				}).then((data) => {
					console.log(data, 'data')
					if (data.success && data.result.total) {
						if (data.result.current == 1) {
							this.CouponArr = data.result.records
						} else {
							this.CouponArr.push(...data.result.records)
						}
						this.isEnd = data.result.current >= data.result.pages
						this.pageNo = data.result.current + 1
						if(this.CouponArr){
							this.getCouponArr(this.CouponArr)
						}

					}
				}).catch((err) => {
					console.log(err)
				})
			},
			getCouponArr(CouponArr){
				CouponArr.forEach((item) => {
					if (item.couponType == 1) {
						if (this.price >= item.xxAmount) {
							this.couponList.push(item)
						} else {
							this.couponListNot.push(item)
						}
					} else if (item.couponType == 2) {
						this.couponList.push(item)
					} else if (item.couponType == 3 || item.couponType == 4) {
						if (this.price <= item.jzAmount) {
							this.couponList.push(item)
						} else {
							this.couponListNot.push(item)
						}
					}
				})
			},
			radioClick() {
				this.check = !this.check
				this.checked=null
				this.$store.commit('USER_COUPON', {
					coupinPrice: 0,
					couponsId:null
				})
			},
			getDetermine() {
				// this.$goBack(1)
				let canNavBack = getCurrentPages()
				  if( canNavBack && canNavBack.length>1) {  
					  uni.navigateBack() 
				  } else {  
					  history.back();  
				  } 
			}, 
			getChecked(idx,jzAmount,id){
				this.checked=idx
				if(!this.check){
					this.$store.commit('USER_COUPON', {
						coupinPrice: Number(jzAmount),
						couponsId: id
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-Y{
		height: calc(var(--safe-height) - 120rpx);
	}
	.body-tab {
		padding: 30rpx 20rpx;
		// min-height: calc(100vh - 266rpx);

		.use-coupon {
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
		}
		.notuse-coupon{
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
			margin-top: 20rpx;
		}
		.notuser-coupont {
			padding: 36rpx 20rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			background: #ffffff;
			margin-top: 20rpx;
			border-radius: 10rpx;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 19rpx;
			}

			.notuser-radio {
				margin-left: auto;
				.checked{
					display: block;
					width: 40rpx;
					height: 40rpx;
					border: 1rpx solid #B3B3B3;
					border-radius: 50%;
					&.checkedActive{
						background-size: 41rpx 41rpx;
						background-image: url("~@/public/images/user/xzyhq_xz.png");
					}
				}
			}
		}
		.coupon-bg{
			background: #E3EBFD;
			border-radius: 0rpx 0rpx 10rpx 10rpx;
			margin-bottom: 20rpx;
		}
		.notuser-cause{
			height: 48rpx;
			line-height: 48rpx;
			color: #4C88FF;
			font-size: 20rpx;
			padding-left: 19rpx;
			
		}
		.coupon {
			height: 200rpx;
			align-items: center;
			background: #FFFFFF;
			border-radius: 10rpx;
			position: relative;
			padding-right: 20rpx;
			margin-top: 20rpx;
			.coupon-name {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 200rpx;
				height: 200rpx;
				color: #ffffff;

				.title {
					align-items: center;

					.value {
						font-size: 72rpx;
						line-height: 1;
						font-weight: 800;

						&.small {
							font-size: 58rpx;
						}
					}
				}

				.des {
					text-align: center;
					margin-top: 10rpx;
					font-size: 20rpx;
					line-height: 1;
				}

				background-size: 100%;
				background-repeat: no-repeat;
				&.type1 {
					background-image: url("~@/public/images/user/mjq_wsy.png");
				}
				
				&.type2 {
					background-image: url("~@/public/images/user/wmkq_wsy.png");
				}
				
				&.type3 {
					background-image: url("~@/public/images/user/mdq_wsy.png");
				}
				
				&.type4 {
					background-image: url("~@/public/images/user/zkq_wsy.png");
				}

			}

			.coupon-detail {
				flex: 2;
				justify-content: center;
				margin-left: 30rpx;

				.title {
					font-size: 32rpx;
					font-weight: 500;
					line-height: 32rpx;
				}

				.des {
					margin-top: 18rpx;
					font-size: 22rpx;
					line-height: 1;
				}

				.date {
					margin: 38rpx 0 0;
					font-size: 22rpx;
					line-height: 22rpx;
					color: #999999;
				}
			}

			.coupon-tag {
				padding: 0 20rpx;
				position: absolute;
				top: 0;
				right: 0;
				height: 48rpx;
				border-radius: 0rpx 10rpx 0rpx 10rpx;
				font-size: 20rpx;
				font-weight: 500;
				line-height: 48rpx;

				&.active1 {
					background: #FFDFB2;
					color: #984F00;
				}

				&.active2 {
					background: #FFEFD9;
					color: #CCA57A;
				}

				&.active3 {
					background: #EDEDED;
					color: #B3B3B3
				}
			}
			.checked{
				display: block;
				width: 40rpx;
				height: 40rpx;
				border: 1rpx solid #B3B3B3;
				border-radius: 50%;
				&.checkedActive{
					background-size: 41rpx 41rpx;
					background-image: url("~@/public/images/user/xzyhq_xz.png");
				}
			}
			.coupon-line {
				width: 2rpx;
				height: 177rpx;
				background-image: url("~@/public/images/user/x.png");
				background-size: 100%;
				background-repeat: no-repeat;
			}

			.coupon-status {
				width: 88rpx;
				font-size: 28rpx;
				line-height: 28rpx;
				color: #B3B3B3;
				justify-content: center;
				align-items: center;

				text {
					writing-mode: vertical-lr;
					letter-spacing: 4rpx;
				}
			}

			&.active {
				.coupon-name {
					color: #FFFFFF !important;

					&.type1 {
						background-image: url("~@/public/images/user/mjq_ysy.png");
					
						&.tab1,
						&.tab2 {
							color: #FF999E !important;
						}
					}
					
					&.type2 {
						background-image: url("~@/public/images/user/wmkq_ysy.png");
					
						&.tab1,
						&.tab2 {
							color: #6CD9A3 !important;
						}
					}
					
					&.type3 {
						background-image: url("~@/public/images/user/mdq_ysy.png");
					
						&.tab1,
						&.tab2 {
							color: #80AAFF !important;
						}
					}
					
					&.type4 {
						background-image: url("~@/public/images/user/zkq_ysy.png");
					
						&.tab1,
						&.tab2 {
							color: #FFBA1A !important;
						}
					}
				}

				.coupon-status {
					color: #0055FF;
				}
			}
		}

		.coupon-empty {
			margin-top: 160rpx;
			align-items: center;

			image {
				height: 320rpx;
			}

			text {
				margin-top: 30rpx;
				font-size: 26rpx;
				line-height: 26rpx;
				color: #B3B3B3;
			}
		}
	}
	.list-end{
		margin-top: 20rpx;
	}
	.btn {
		width: 690rpx;
		padding: 12rpx 30rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -1rpx 0rpx 0rpx #EDEDED;
		position: fixed;
		bottom: 0;
		text {
			display: block;
			text-align: center;
			line-height: 100rpx;
			width: 690rpx;
			height: 96rpx;
			background: #0055FF;
			border-radius: 48rpx;
			color: #FFFFFF;
			font-size: 32rpx;
		}
	}
</style>